<template xmlns="">
    <app-layout>
        <view>
            <app-nav-bar v-if="navbarStatus" :fixed="true" :has-height="false"
                         @headHeight="headHeight"
                         :back-color="scrollTop > 10 ? 'black' :'white'"
                         :background-color="scrollTop > 10 ? 'white' :'rgba(0,0,0,0)'"
                         has-mall-setting="0" title="店铺首页" :color="scrollTop > 10 ? '#353535' :'white'"></app-nav-bar>

            <!-- #ifndef MP-TOUTIAO -->
            <movable-area class="share-box mch-diy-share" :style="{height: `calc(100vh - ${!hasAttr && navHeight ? navHeight : '0px'})`}">
                <scroll-view @scroll="bindScroll" class="shop-all" scroll-y
                             @scrolltoupper="bindTopper"
                             scroll-anchoring
                             :style="{height: `calc(100vh - ${!hasAttr && navHeight ? navHeight : '0px'})`}">

                    <block v-for="(temp, index) in list" :key="index">
                        <template v-if="temp.id === 'background'">
                            <view
                                :style="[
                                {'background-color':`${temp.data.backgroundColor}`,
                                'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                                'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                                'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                                'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}
                            ]"
                                class="app-diy-bg"
                            ></view>
                        </template>
                        <template v-else-if="temp.id === 'search'">
                            <app-search-for :p="`?sign=mch&mch_id=${mch_id}`" v-bind:value="temp.data"></app-search-for>
                        </template>
                        <template v-else-if="temp.id === 'nav'">
                            <app-navigation-two-icon
                                :background-pic-url="temp.data.backgroundPicUrl"
                                :bg-type="temp.data.bgType"
                                v-bind:alone-num="temp.data.aloneNum"
                                v-bind:background="temp.data.backgroundColor"
                                v-bind:color="temp.data.color"
                                v-bind:columns="temp.data.columns"
                                v-bind:line-num="temp.data.lineNum"
                                v-bind:mode-type="temp.data.modeType"
                                v-bind:nav-type="temp.data.navType"
                                v-bind:navs="temp.data.navs"
                                v-bind:swiper-color="temp.data.swiperColor"
                                v-bind:swiper-no-color="temp.data.swiperNoColor"
                                v-bind:swiper-type="temp.data.swiperType"
                                v-bind:temp-index="temp_index"></app-navigation-two-icon>
                        </template>
                        <template v-else-if="temp.id === 'banner'">
                            <template v-if="temp.data.banners.length > 0">
                                <view v-if="temp.data.effect == 1 || !temp.data.effect"
                                      :style="{backgroundColor: temp.data.bg_padding, padding: `${temp.data.c_padding_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`}"
                                >
                                    <app-swiper
                                        :style="{height: temp.data.height + 'rpx'}"
                                        :list="temp.data.banners"
                                        :autoplay="temp.data.autoplay === 0 ? true : false"
                                        name="pic_url"
                                        :effect3d="temp.data.style === 2 ? true : false"
                                        :height="temp.data.height"
                                        :effect3dPreviousMargin="50"
                                        :imgMode="temp.data.fill === 0 ? 'aspectFit' : 'scaleToFill'"
                                        :interval="temp.data.interval ? temp.data.interval : 3000"
                                        :duration="temp.data.duration ? temp.data.duration : 500"
                                        :mode="temp.data.mode"
                                        v-bind:c-border-bottom="temp.data.c_border_bottom"
                                        v-bind:c-border-top="temp.data.c_border_top"
                                    ></app-swiper>
                                </view>
                                <view
                                    :style="{backgroundColor: temp.data.bg_padding, padding: `${temp.data.c_border_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`}"
                                    v-if="temp.data.effect == 2">
                                    <u-swiper
                                        :style="{height: temp.data.height + 'rpx'}"
                                        :list="temp.data.banners"
                                        name="pic_url"
                                        :height="temp.data.height"
                                        :interval="temp.data.interval ? temp.data.interval : 3000"
                                        :duration="temp.data.duration ? temp.data.duration : 500"
                                        :mode="temp.data.mode"
                                        :imgMode="temp.data.fill === 0 ? 'aspectFit' : 'scaleToFill'"
                                        :autoplay="temp.data.autoplay === 0 ? true : false"
                                        v-bind:c-border-bottom="temp.data.c_border_bottom"
                                        v-bind:c-border-top="temp.data.c_border_top"
                                    >
                                    </u-swiper>
                                </view>
                            </template>
                        </template>
                        <template v-else-if="temp.id === 'notice'">
                            <u-announcement
                                v-bind:bgColor="temp.data.background"
                                v-bind:btn-color="temp.data.btnColor"
                                v-bind:btn-height="temp.data.btnHeight"
                                v-bind:btn-radius="`${temp.data.btnRadius}rpx`"
                                v-bind:btn-text="temp.data.btnText"
                                v-bind:btn-text-color="temp.data.btnTextColor"
                                v-bind:btn-width="temp.data.btnWidth"
                                v-bind:content="temp.data.content"
                                v-bind:header-url="temp.data.headerUrl"
                                v-bind:icon="temp.data.icon"
                                v-bind:name="temp.data.name"
                                v-bind:textColor="temp.data.textColor"
                            ></u-announcement>
                        </template>
                        <template v-else-if="temp.id === 'image-text'">
                            <view :style="{backgroundColor: temp.data.bg || 'inherit'}" style="padding: 1rpx 24rpx;">
                                <app-rich v-bind:content='temp.data.content'></app-rich>
                            </view>
                        </template>
                        <template v-else-if="temp.id === 'link'">
                            <app-associated-link
                                v-bind:arrows-switch="temp.data.arrowsSwitch"
                                v-bind:background="temp.data.background"
                                v-bind:color="temp.data.color"
                                v-bind:font-size="temp.data.fontSize"
                                v-bind:link="Object.assign({}, temp.data.link)"
                                v-bind:pic-switch="temp.data.picSwitch"
                                v-bind:pic-url="temp.data.picUrl"
                                v-bind:position="temp.data.position"
                                v-bind:style-color="temp.data.styleColor"
                                v-bind:styleNum="temp.data.style"
                                v-bind:title="temp.data.title"
                            ></app-associated-link>
                        </template>
                        <template v-else-if="temp.id === 'rubik'">
                            <view style="position: relative">
                                <app-image-ad
                                    v-bind:height="temp.data.height"
                                    v-bind:image-style="temp.data.style"
                                    v-bind:list="temp.data.list"
                                ></app-image-ad>
                                <block v-for="(hotspot, hotspot_index) in temp.data.hotspot" v-bind:key="hotspot_index">
                                    <app-hotspot v-bind:hotspot="rubikHotspot(hotspot)"></app-hotspot>
                                </block>
                            </view>
                        </template>
                        <template v-else-if="temp.id === 'video'">
                            <app-video
                                v-bind:bg-padding="temp.data.bg_padding"
                                v-bind:c-border-bottom="temp.data.c_border_bottom"
                                v-bind:c-border-top="temp.data.c_border_top"
                                v-bind:c-padding-bottom="temp.data.c_padding_bottom"
                                v-bind:c-padding-lr="temp.data.c_padding_lr"
                                v-bind:c-padding-top="temp.data.c_padding_top"
                                v-bind:has-auto="temp.data.hasAuto"
                                v-bind:has-cycle="temp.data.hasCycle"
                                v-bind:pic-url="temp.data.pic_url"
                                v-bind:url="temp.data.url"
                            ></app-video>
                        </template>
                        <!-- 普通商品列表 -->
                        <template v-else-if="temp.id === 'goods'">
                            <view
                                :style="[
                                    {'background-color':`${temp.data.backgroundColor}`,
                                    'padding': `${temp.data.c_padding_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`,

                                    'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                                    'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                                    'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                                    'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}
                                ]">
                                <template v-if="temp.data.catPosition === 'top'">
                                    <!--分类-->
                                    <template v-if="temp.data.showCat && temp.data.catList.length > 1">
                                        <scroll-view scroll-x :style="{backgroundColor: temp.data.catBgColor}"
                                                     style="margin-bottom: 12rpx"
                                                     scroll-with-animation
                                                     :scroll-left="temp.data.scrollLeft"
                                                     v-bind:class="[theme, 'u-scroll-view', 'dir-left-nowrap']">
                                            <text
                                                :id="`scroll-${catIndex}`"
                                                v-for="(catItem, catIndex) in temp.data.catList"
                                                v-bind:key="catIndex"
                                                v-bind:class="[
                                                    temp.data.catStyle === 2 && temp.data.activeCurrent === catIndex ?
                                                    'u-active-current-round'  :
                                                    temp.data.catStyle === 1 && temp.data.activeCurrent === catIndex ?
                                                    'u-active-current': 'u-default-text',
                                                    temp.data.catStyle === 2 ? 'u-current-round' : '',
                                                    'u-nav-item'
                                                ]"
                                                v-bind:style="temp.data.catStyle === 2 && temp.data.activeCurrent === catIndex ? `background-color: ${temp.data.tagColor ? temp.data.tagColor : theme.background};color: ${temp.data.catSelectedColor};`
                                                    : temp.data.catStyle === 1 && temp.data.activeCurrent === catIndex  ? `color: ${temp.data.catSelectedColor ? temp.data.catSelectedColor : theme.color};border-color: ${temp.data.tagColor ? temp.data.tagColor : theme.border}`
                                                    : temp.data.catStyle === 1 ? `color: ${temp.data.catUnselectedColor}`: `color: ${temp.data.catUnselectedColor}`"
                                                v-on:click="changeTopNav(catIndex,temp.data)"
                                            >
                                                {{ catItem.menuName }}
                                            </text>
                                        </scroll-view>
                                    </template>
                                    <app-diy-list @show="attrShow" :temp="temp" :theme="theme"></app-diy-list>
                                </template>

                                <template v-else>
                                    <app-recommended-product-list
                                        :goods-style="temp.data.goodsStyle"
                                        :list-style="temp.data.listStyle"
                                        :sign="temp.id"
                                        v-bind:bg="temp.data.bg"
                                        v-bind:button-color="temp.data.buttonColor" v-bind:buy-btn="temp.data.buyBtn"
                                        v-bind:buy-btn-style="temp.data.buyBtnStyle"
                                        v-bind:buy-btn-text="temp.data.buyBtnText"
                                        v-bind:c-border-bottom="temp.data.c_border_bottom"
                                        v-bind:c-border-top="temp.data.c_border_top"
                                        v-bind:c-padding-lr="temp.data.c_padding_lr"
                                        v-bind:cat-bg-color="temp.data.catBgColor" v-bind:cat-list="temp.data.catList"
                                        v-bind:cat-position="temp.data.catPosition"
                                        v-bind:cat-selected-color="temp.data.catSelectedColor"
                                        v-bind:cat-style="temp.data.catStyle"
                                        v-bind:cat-unselected-color="temp.data.catUnselectedColor"
                                        v-bind:customize-goods-tag="temp.data.customizeGoodsTag"
                                        v-bind:fill="temp.data.fill"
                                        v-bind:goods-cover-proportion="temp.data.goodsCoverProportion"
                                        v-bind:goods-tag-pic-url="temp.data.goodsTagPicUrl"
                                        v-bind:is-under-line-price="temp.data.isUnderLinePrice"
                                        v-bind:list="temp.data.list"
                                        v-bind:show-buy-btn="temp.data.showBuyBtn"
                                        v-bind:show-cat="temp.data.showCat"
                                        v-bind:show-goods-name="temp.data.showGoodsName"
                                        v-bind:show-goods-price="temp.data.showGoodsPrice"
                                        v-bind:show-goods-tag="temp.data.showGoodsTag"
                                        v-bind:tag-color="temp.data.tagColor"
                                        v-bind:theme="getTheme"
                                        v-on:buyProduct="buyProduct"
                                    ></app-recommended-product-list>
                                </template>
                            </view>
                        </template>
                        <template v-else-if="temp.id === 'empty'">
                            <app-empty
                                v-bind:background-color="temp.data.background"
                                v-bind:height="temp.data.height"
                            ></app-empty>
                        </template>
                        <template v-else-if="temp.id === 'customer'">
                            <app-customer
                                v-bind:bg="temp.data.bg"
                                v-bind:bg-padding="temp.data.bg_padding"
                                v-bind:c-border-bottom="temp.data.c_border_bottom"
                                v-bind:c-border-top="temp.data.c_border_top"
                                v-bind:c-padding-bottom="temp.data.c_padding_bottom"
                                v-bind:c-padding-lr="temp.data.c_padding_lr"
                                v-bind:c-padding-top="temp.data.c_padding_top"
                                v-bind:copy-bg="temp.data.copy_bg"
                                v-bind:copy-border="temp.data.copy_border"
                                v-bind:copy-color="temp.data.copy_color"
                                v-bind:copy-radius="temp.data.copy_radius"
                                v-bind:copy-title="temp.data.copy_title"
                                v-bind:save-bg="temp.data.save_bg"
                                v-bind:save-border="temp.data.save_border"
                                v-bind:save-color="temp.data.save_color"
                                v-bind:save-radius="temp.data.save_radius"
                                v-bind:save-title="temp.data.save_title"
                                v-bind:select-style="temp.data.select_style"
                                v-bind:sub-title="temp.data.sub_title"
                                v-bind:sub-title-color="temp.data.sub_title_color"
                                v-bind:title="temp.data.title"

                                v-bind:title-color="temp.data.title_color"
                                v-bind:two-bg="temp.data.two_bg"
                                v-bind:two-border="temp.data.two_border"
                                v-bind:two-color="temp.data.two_color"
                                v-bind:two-icon="temp.data.two_icon"
                                v-bind:two-radius="temp.data.two_radius"
                                v-bind:two-title="temp.data.two_title"
                                v-bind:wechat="temp.data.wechat"
                                v-bind:wechat-color="temp.data.wechat_color"
                            ></app-customer>
                        </template>
                        <template v-else-if="temp.id === 'mch-home'">
                            <mch-diy-home :diy-data="temp.data" :mch-data="mchData" :mch-id="mch_id"></mch-diy-home>
                        </template>
                    </block>
                </scroll-view>
                <movable-view v-if="shareModel && diyData"
                              :x="info.x" :y="info.y"
                              class="max"
                              :style="{height: `calc(140rpx + ${startHeight}px)`}"
                              :disabled="diyData.is_float == 0"
                              direction="all" inertia @change="changeMovable">
                    <view class="share-all" @click.stop="clickMovable" :style="{marginTop: `${startHeight}px`}" >
                        <view class="share-close" v-if="diyData.is_open == 1" @click.stop="closeShare"></view>
                        <view class="share-icon" :style="{backgroundImage: `url(${diyData.share_btn_pic})`}"></view>
                    </view>
                </movable-view>
            </movable-area>
            <!--  #endif -->


            <!-- #ifdef MP-TOUTIAO -->
            <view class="share-box mch-diy-share">
                <view class="shop-all" :style="{marginBottom: `calc${navHeight}`}">

                    <block v-for="(temp, index) in list" :key="index">
                        <template v-if="temp.id === 'background'">
                            <view
                                :style="[
                                {'background-color':`${temp.data.backgroundColor}`,
                                'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                                'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                                'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                                'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}
                            ]"
                                class="app-diy-bg"
                            ></view>
                        </template>
                        <template v-else-if="temp.id === 'search'">
                            <app-search-for :p="`?sign=mch&mch_id=${mch_id}`" v-bind:value="temp.data"></app-search-for>
                        </template>
                        <template v-else-if="temp.id === 'nav'">
                            <app-navigation-two-icon
                                :background-pic-url="temp.data.backgroundPicUrl"
                                :bg-type="temp.data.bgType"
                                v-bind:alone-num="temp.data.aloneNum"
                                v-bind:background="temp.data.backgroundColor"
                                v-bind:color="temp.data.color"
                                v-bind:columns="temp.data.columns"
                                v-bind:line-num="temp.data.lineNum"
                                v-bind:mode-type="temp.data.modeType"
                                v-bind:nav-type="temp.data.navType"
                                v-bind:navs="temp.data.navs"
                                v-bind:swiper-color="temp.data.swiperColor"
                                v-bind:swiper-no-color="temp.data.swiperNoColor"
                                v-bind:swiper-type="temp.data.swiperType"
                                v-bind:temp-index="temp_index"></app-navigation-two-icon>
                        </template>
                        <template v-else-if="temp.id === 'banner'">
                            <template v-if="temp.data.banners.length > 0">
                                <view v-if="temp.data.effect == 1 || !temp.data.effect"
                                      :style="{backgroundColor: temp.data.bg_padding, padding: `${temp.data.c_padding_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`}"
                                >
                                    <app-swiper
                                        :style="{height: temp.data.height + 'rpx'}"
                                        :list="temp.data.banners"
                                        :autoplay="temp.data.autoplay === 0 ? true : false"
                                        name="pic_url"
                                        :effect3d="temp.data.style === 2 ? true : false"
                                        :height="temp.data.height"
                                        :effect3dPreviousMargin="50"
                                        :imgMode="temp.data.fill === 0 ? 'aspectFit' : 'scaleToFill'"
                                        :interval="temp.data.interval ? temp.data.interval : 3000"
                                        :duration="temp.data.duration ? temp.data.duration : 500"
                                        :mode="temp.data.mode"
                                        v-bind:c-border-bottom="temp.data.c_border_bottom"
                                        v-bind:c-border-top="temp.data.c_border_top"
                                    ></app-swiper>
                                </view>
                                <view
                                    :style="{backgroundColor: temp.data.bg_padding, padding: `${temp.data.c_border_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`}"
                                    v-if="temp.data.effect == 2">
                                    <u-swiper
                                        :style="{height: temp.data.height + 'rpx'}"
                                        :list="temp.data.banners"
                                        name="pic_url"
                                        :height="temp.data.height"
                                        :interval="temp.data.interval ? temp.data.interval : 3000"
                                        :duration="temp.data.duration ? temp.data.duration : 500"
                                        :mode="temp.data.mode"
                                        :imgMode="temp.data.fill === 0 ? 'aspectFit' : 'scaleToFill'"
                                        :autoplay="temp.data.autoplay === 0 ? true : false"
                                        v-bind:c-border-bottom="temp.data.c_border_bottom"
                                        v-bind:c-border-top="temp.data.c_border_top"
                                    >
                                    </u-swiper>
                                </view>
                            </template>
                        </template>
                        <template v-else-if="temp.id === 'notice'">
                            <u-announcement
                                v-bind:bgColor="temp.data.background"
                                v-bind:btn-color="temp.data.btnColor"
                                v-bind:btn-height="temp.data.btnHeight"
                                v-bind:btn-radius="`${temp.data.btnRadius}rpx`"
                                v-bind:btn-text="temp.data.btnText"
                                v-bind:btn-text-color="temp.data.btnTextColor"
                                v-bind:btn-width="temp.data.btnWidth"
                                v-bind:content="temp.data.content"
                                v-bind:header-url="temp.data.headerUrl"
                                v-bind:icon="temp.data.icon"
                                v-bind:name="temp.data.name"
                                v-bind:textColor="temp.data.textColor"
                            ></u-announcement>
                        </template>
                        <template v-else-if="temp.id === 'image-text'">
                            <view :style="{backgroundColor: temp.data.bg || 'inherit'}" style="padding: 1rpx 24rpx;">
                                <app-rich v-bind:content='temp.data.content'></app-rich>
                            </view>
                        </template>
                        <template v-else-if="temp.id === 'link'">
                            <app-associated-link
                                v-bind:arrows-switch="temp.data.arrowsSwitch"
                                v-bind:background="temp.data.background"
                                v-bind:color="temp.data.color"
                                v-bind:font-size="temp.data.fontSize"
                                v-bind:link="Object.assign({}, temp.data.link)"
                                v-bind:pic-switch="temp.data.picSwitch"
                                v-bind:pic-url="temp.data.picUrl"
                                v-bind:position="temp.data.position"
                                v-bind:style-color="temp.data.styleColor"
                                v-bind:styleNum="temp.data.style"
                                v-bind:title="temp.data.title"
                            ></app-associated-link>
                        </template>
                        <template v-else-if="temp.id === 'rubik'">
                            <view style="position: relative">
                                <app-image-ad
                                    v-bind:height="temp.data.height"
                                    v-bind:image-style="temp.data.style"
                                    v-bind:list="temp.data.list"
                                ></app-image-ad>
                                <block v-for="(hotspot, hotspot_index) in temp.data.hotspot" v-bind:key="hotspot_index">
                                    <app-hotspot v-bind:hotspot="rubikHotspot(hotspot)"></app-hotspot>
                                </block>
                            </view>
                        </template>
                        <template v-else-if="temp.id === 'video'">
                            <app-video
                                v-bind:bg-padding="temp.data.bg_padding"
                                v-bind:c-border-bottom="temp.data.c_border_bottom"
                                v-bind:c-border-top="temp.data.c_border_top"
                                v-bind:c-padding-bottom="temp.data.c_padding_bottom"
                                v-bind:c-padding-lr="temp.data.c_padding_lr"
                                v-bind:c-padding-top="temp.data.c_padding_top"
                                v-bind:has-auto="temp.data.hasAuto"
                                v-bind:has-cycle="temp.data.hasCycle"
                                v-bind:pic-url="temp.data.pic_url"
                                v-bind:url="temp.data.url"
                            ></app-video>
                        </template>
                        <!-- 普通商品列表 -->
                        <template v-else-if="temp.id === 'goods'">
                            <view
                                :style="[
                                    {'background-color':`${temp.data.backgroundColor}`,
                                    'padding': `${temp.data.c_padding_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`,

                                    'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                                    'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                                    'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                                    'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}
                                ]">
                                <template v-if="temp.data.catPosition === 'top'">
                                    <app-diy-list @show="attrShow" :temp="temp" :theme="theme"></app-diy-list>
                                </template>

                                <template v-else>
                                    <app-recommended-product-list
                                        :goods-style="temp.data.goodsStyle"
                                        :list-style="temp.data.listStyle"
                                        :sign="temp.id"
                                        v-bind:bg="temp.data.bg"
                                        v-bind:button-color="temp.data.buttonColor" v-bind:buy-btn="temp.data.buyBtn"
                                        v-bind:buy-btn-style="temp.data.buyBtnStyle"
                                        v-bind:buy-btn-text="temp.data.buyBtnText"
                                        v-bind:c-border-bottom="temp.data.c_border_bottom"
                                        v-bind:c-border-top="temp.data.c_border_top"
                                        v-bind:c-padding-lr="temp.data.c_padding_lr"
                                        v-bind:cat-bg-color="temp.data.catBgColor" v-bind:cat-list="temp.data.catList"
                                        v-bind:cat-position="temp.data.catPosition"
                                        v-bind:cat-selected-color="temp.data.catSelectedColor"
                                        v-bind:cat-style="temp.data.catStyle"
                                        v-bind:cat-unselected-color="temp.data.catUnselectedColor"
                                        v-bind:customize-goods-tag="temp.data.customizeGoodsTag"
                                        v-bind:fill="temp.data.fill"
                                        v-bind:goods-cover-proportion="temp.data.goodsCoverProportion"
                                        v-bind:goods-tag-pic-url="temp.data.goodsTagPicUrl"
                                        v-bind:is-under-line-price="temp.data.isUnderLinePrice"
                                        v-bind:list="temp.data.list"
                                        v-bind:show-buy-btn="temp.data.showBuyBtn"
                                        v-bind:show-cat="temp.data.showCat"
                                        v-bind:show-goods-name="temp.data.showGoodsName"
                                        v-bind:show-goods-price="temp.data.showGoodsPrice"
                                        v-bind:show-goods-tag="temp.data.showGoodsTag"
                                        v-bind:tag-color="temp.data.tagColor"
                                        v-bind:theme="getTheme"
                                        v-on:buyProduct="buyProduct"
                                    ></app-recommended-product-list>
                                </template>
                            </view>
                        </template>
                        <template v-else-if="temp.id === 'empty'">
                            <app-empty
                                v-bind:background-color="temp.data.background"
                                v-bind:height="temp.data.height"
                            ></app-empty>
                        </template>
                        <template v-else-if="temp.id === 'customer'">
                            <app-customer
                                v-bind:bg="temp.data.bg"
                                v-bind:bg-padding="temp.data.bg_padding"
                                v-bind:c-border-bottom="temp.data.c_border_bottom"
                                v-bind:c-border-top="temp.data.c_border_top"
                                v-bind:c-padding-bottom="temp.data.c_padding_bottom"
                                v-bind:c-padding-lr="temp.data.c_padding_lr"
                                v-bind:c-padding-top="temp.data.c_padding_top"
                                v-bind:copy-bg="temp.data.copy_bg"
                                v-bind:copy-border="temp.data.copy_border"
                                v-bind:copy-color="temp.data.copy_color"
                                v-bind:copy-radius="temp.data.copy_radius"
                                v-bind:copy-title="temp.data.copy_title"
                                v-bind:save-bg="temp.data.save_bg"
                                v-bind:save-border="temp.data.save_border"
                                v-bind:save-color="temp.data.save_color"
                                v-bind:save-radius="temp.data.save_radius"
                                v-bind:save-title="temp.data.save_title"
                                v-bind:select-style="temp.data.select_style"
                                v-bind:sub-title="temp.data.sub_title"
                                v-bind:sub-title-color="temp.data.sub_title_color"
                                v-bind:title="temp.data.title"

                                v-bind:title-color="temp.data.title_color"
                                v-bind:two-bg="temp.data.two_bg"
                                v-bind:two-border="temp.data.two_border"
                                v-bind:two-color="temp.data.two_color"
                                v-bind:two-icon="temp.data.two_icon"
                                v-bind:two-radius="temp.data.two_radius"
                                v-bind:two-title="temp.data.two_title"
                                v-bind:wechat="temp.data.wechat"
                                v-bind:wechat-color="temp.data.wechat_color"
                            ></app-customer>
                        </template>
                        <template v-else-if="temp.id === 'mch-home'">
                            <mch-diy-home :diy-data="temp.data" :mch-data="mchData" :mch-id="mch_id"></mch-diy-home>
                        </template>
                    </block>
                </view>
                <view class="share-all" style="position: fixed;z-index: 1111" @click.stop="clickMovable"
                      :style="{marginTop: `${startHeight}px`,top:`${info.y}px`, left: `${info.x}px`}">
                    <view class="share-close" v-if="diyData.is_open == 1" @click.stop="closeShare"></view>
                    <view class="share-icon" :style="{backgroundImage: `url(${diyData.share_btn_pic})`}"></view>
                </view>
            </view>
            <!--  #endif -->
            <mch-share v-if="mchData.name" ref="share" :detail="mchData" v-model="mchShare" type="share" @share="hShareAppMessage"></mch-share>
            <mch-navbar v-if="mch_id && !hasAttr" :mchId="mch_id" @setHeight="calcNavbar">
                <template>
                    <view></view>
                </template>
            </mch-navbar>
            <app-attr :goods="attrGoods.goods" :attrGroupList="attrGoods.goods.attr_groups" :theme="getTheme" :show="attrGoods.attrShow"></app-attr>
        </view>
    </app-layout>
</template>

<script>
import {mapGetters, mapState} from 'vuex';
import mchDiyHome from '../mch-diy-home';

import mchNavbar from '../mch-navbar';
import mchCustomer from "../mch-customer";

import appDiyList from '../../../components/page-component/index/app-diy-list.vue';
import appSearchFor from '../../../components/page-component/app-search-for/app-search-for.vue';
import appNavigationTwoIcon from '../../../components/page-component/app-navigation-icon/app-navigation-two-icon.vue';
import appSwiper from '../../../components/page-component/app-swiper/app-swiper.vue';
import uAnnouncement from "../../../components/page-component/u-announcement/u-announcement";
import appRich from "../../../components/basic-component/app-rich/parse";
import appAssociatedLink from "../../../components/page-component/app-associated-link/app-associated-link";
import appImageAd from "../../../components/page-component/app-image-ad/app-image-ad";
import appHotspot from "../../../components/basic-component/app-hotspot/app-hotspot";
import appVideo from "../../../components/page-component/app-video/app-video";
import appRecommendedProductList
    from "../../../components/page-component/app-recommended-product/app-recommended-product-list";
import appEmpty from "../../../components/basic-component/app-empty/app-empty";
import appCustomer from "../../../components/page-component/app-customer/app-customer";
import appNavBar from '../../../components/page-component/index/app-nav-bar.vue';
import appAttr from '../../../components/page-component/app-attr/app-attr.vue';
import mchShare from "../mch-share";
import uSwiper from "../../../components/page-component/app-swiper/swiper";

export default {
    name: "wt",
    components: {
        appDiyList,
        mchDiyHome, mchCustomer, mchNavbar, appNavBar,
        appSearchFor,
        appNavigationTwoIcon,
        appSwiper,
        uAnnouncement,
        appRich,
        appAssociatedLink,
        appImageAd,
        appHotspot,
        appVideo,
        appRecommendedProductList,
        appEmpty,
        appCustomer,
        mchShare,
        appAttr,
        uSwiper,
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            systemInfo: state => state.gConfig.systemInfo
        }),
        ...mapGetters('mallConfig', {
            getTheme: 'getTheme',
        }),
        ...mapGetters('iPhoneX', {
            BotHeight: 'getBotHeight',
            emptyHeight: 'getEmpty',
        }),
        diyData(){
            let data = {};
            this.list.forEach(item => {
                if(item.id === 'mch-share') {
                    data = item.data;
                    this.shareModel = true;
                }
            });
            return data;
        },
        navbarStatus: function () {
            // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO
            return ['windows', 'mac'].indexOf(this.systemInfo.platform) === -1;
            // #endif
            // #ifdef H5
            return !this.$jwx.isWechat();
            // #endif
            // #ifdef MP-ALIPAY
            return false;
            // #endif
        },
    },
    data() {
        return {
            hasAttr: false,
            attrGoods: {
                goods: {},
                attrShow: 0
            },
            mchShare: false,
            temp_index: 0,

            info: {x: 300, y: 562},
            shareModel: false,

            list: [],
            shareStatus: true,
            shareConfig: {
                is_open: 1,
                share_btn_pic: 'http://dwz.date/eWrf',
                share_bottom: 70,
                share_right: 10,
                is_float: 1,
            },
            mch_id: '',
            sort: 1,
            cat_id: 0,
            sort_type: 0,
            mchData: {},
            scrollTop: 0,
            navHeight: 0,
            startHeight: 0,
        }
    },
    /* #ifdef MP-TOUTIAO */
    onPageScroll(detail) {
        if ((detail.scrollTop > 10 && this.scrollTop <= 10) || (detail.scrollTop < 10 && this.scrollTop > 10)) {
            this.scrollTop = detail.scrollTop;
        }
        this.$store.dispatch('page/actionSetScrollTop', detail.scrollTop);
    },
    /* #endif */

    onLoad(options) {
        this.$commonLoad.onload(options);
        this.mch_id = options.mch_id;
        this.loadData();
    },
    // #ifdef MP
    onShareAppMessage(object) {
        return this.hShareAppMessage();
    },
    // #endif
    share(ref){
        console.log(ref,1);
    },
    methods: {
        attrShow(e) {
            this.hasAttr = e;
        },
        // 切换分类
        changeTopNav(index,item) {
            item.activeCurrent = index;
            item.list = item.catList[index].goodsList;
            this.$forceUpdate();
            /////////
            let left = 0;
            for (let i = 0; i < item.catList.length; i++) {
                if (i === index) {
                    left = left + item.catList[i].width / 2;
                    break;
                } else {
                    left += item.catList[i].width + uni.upx2px(44);
                }
            }
            item.scrollLeft = left - uni.upx2px(750 / 2 - 40) || 0;
        },
        share(ref){
            console.log(ref,2);
        },
        headHeight(e){
            this.startHeight = e;
        },
        buyProduct(data) {
            this.attrGoods.goods = data.goods;
            this.attrGoods.attrShow = data.attrShow;
        },
        bindScroll({detail}) {
            if ((detail.scrollTop > 10 && this.scrollTop <= 10) || (detail.scrollTop < 10 && this.scrollTop > 10)) {
                this.scrollTop = detail.scrollTop;
            }
            this.$store.dispatch('page/actionSetScrollTop', detail.scrollTop);
        },
        bindTopper(detail){
            this.scrollTop = 0;
        },
        closeShare() {
            this.shareModel = false;
        },
        // share
        changeMovable({detail}) {
            let self = this;
            if (self.diyData.is_float == 0) return;
            let {x, y} = detail;
            this.$utils.debounce(() => {
                self.info = {x, y};
                self.$storage.setStorageSync('MCH_SHARE_BTN', self.info);
            });
        },

        clickMovable() {
            this.mchShare = true;
        },
        ////////////////////////
        calcNavbar(e){
            this.navHeight = e;
        },
        rubikHotspot(hotspot) {
            if (hotspot && hotspot.link) {
                hotspot.link.url = hotspot.link.value;
                hotspot.link.openType = hotspot.link.open_type;
            }
            return hotspot;
        },
        hShareAppMessage(s = false) {
            let {name, cover_url, description} = this.mchData;
            return this.$shareAppMessage({
                title: name,
                imageUrl: cover_url,
                path: '/plugins/mch/shop/shop',
                desc: description,
                params: {
                    mch_id: this.mch_id
                }
            }, s);
        },
        loadData() {
            this.$showLoading({title: '加载中'});
            this.$request({
                url: this.$api.mch.diy_index,
                data: {
                    mch_id: this.mch_id,
                }
            }).then(info => {
                this.$hideLoading();
                if (info.code === 0) {
                    this.list = info.data.data;
                    this.mchData = info.data.mch;
                    for(let temp of this.list) {
                        if(temp.id == 'goods' && temp.data.showCat) {
                            temp.data.activeCurrent = 0;
                            temp.data.scrollLeft = 0;
                            for(let cat of temp.data.catList) {
                                if(cat.goodsList) {
                                    for(let goods of cat.goodsList) {
                                        if(goods.is_negotiable != 1) {
                                            goods.priceList = this.handlePrice(goods.price);
                                            if(goods.is_level === 1 && (goods.level_price > 0 || goods.level_price == 0)) {
                                                goods.memberList = this.handlePrice(goods.level_price);
                                            }
                                        }else {
                                            goods.priceList = this.handlePrice(this.appSetting.negotiable_text);
                                        }
                                    }
                                }
                            }
                            temp.data.list = temp.data.catList && temp.data.catList.length > 0? temp.data.catList[0].goodsList : [];
                        }
                    }

                    let diyData = this.$storage.getStorageSync('MCH_SHARE_BTN');
                    let {is_float, share_bottom, share_right} = this.diyData;
                    if (diyData && is_float == 1) {
                        this.info = diyData;
                    } else {
                        let e = this.navHeight ? uni.upx2px(110) : 0;
                        let iphone = this.emptyHeight ? 34 : 0;
                        this.info = {
                            x: uni.upx2px(750 - 140 - Number(share_right)),
                            y: this.systemInfo.screenHeight - uni.upx2px(140 + Number(share_bottom)) - e - iphone - this.startHeight
                        };
                        console.log(this.info,e,iphone);
                    }
                }
            }).catch(info => {
                this.$hideLoading();
            })
        },
        transLabelBackgroundPosition(val) {
            val = Number(val);
            switch (val) {
                case 1:
                    return 'left top';
                case 2:
                    return 'center top';
                case 3:
                    return 'right top';
                case 4:
                    return 'left center';
                case 5:
                    return 'center center';
                case 6:
                    return 'right center';
                case 7:
                    return 'left bottom';
                case 8:
                    return 'center bottom';
                case 9:
                    return 'right bottom';
                default:
                    return 'center';
            }
        },
        transLabelBackgroundRepeat(val) {
            val = Number(val);
            switch (val) {
                case 1:
                    return 'no-repeat';
                case 2:
                    return 'repeat-x';
                case 3:
                    return 'repeat-y';
                case 4:
                    return 'repeat';
                default:
                    return 'no-repeat';
            }
        },
    }
}
</script>

<style scoped lang="scss">
.share-box {
    /*  #ifdef MP-TOUTIAO  */
    position: absolute;
    /*  #endif  */
    /*  #ifndef MP-TOUTIAO  */
    position: fixed;
    height: 100vh;
    /*  #endif  */
    width: 100%;
    top: 0;
}
.u-scroll-view {
    white-space: nowrap;
    //width: 750upx;
    height: 80upx;
    .u-current-round {
        height: 40upx;
        width: auto;
        padding-top:0;
        padding-left: 24upx;
        padding-right: 24upx;
        border-radius: 30upx;
        line-height: 45upx;
        margin: 20upx 24upx;
    }
}
.u-nav-item {
    display: inline-block;
    font-size: 28upx;
    margin-right: 52upx;
    white-space: nowrap;
}
.u-active-current-round {
    color: white;
}
.u-default-text {
    color: #666666;
}
.mch-diy-share {
    .max {
        height: 140#{rpx};
        width: 140#{rpx};
        z-index: 1001;
    }

    .share-all {
        height: 140#{rpx};
        width: 140#{rpx};
        position: relative;

        .share-close {
            background-image: url("");
            background-repeat: no-repeat;
            height: 32#{rpx};
            width: 32#{rpx};
            position: absolute;
            top: 0;
            right: 0;
            background-size: 100% 100%;
            display: block;
        }

        .share-icon {
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 100%;
            width: 100%
        }
    }
}
.app-diy-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
</style>